<template>
  <view class="success-container">
    <image src="/static/play-success.png" mode="widthFix" class="success-img" />
    <view class="score-info">基础积分：20</view>
    <view class="multiplier-area">
      <view>抽取倍率：</view>
      <picker :range="multipliers" @change="onMultiplierChange">
        <view class="picker">✖️{{ multipliers[selectedMultiplier] }}</view>
      </picker>
      <button @click="drawMultiplier">点击抽奖</button>
    </view>
    <view class="final-score">本轮得分：{{ finalScore }}</view>
    <button @click="watchAd">看广告得分并进入下一关</button>
    <button @click="nextLevel">直接进入下一关</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const multipliers = ref([3, 5, 7, 5, 3])
const selectedMultiplier = ref(0)
const finalScore = ref(20)

const onMultiplierChange = (e) => {
  selectedMultiplier.value = e.detail.value
}

const drawMultiplier = () => {
  selectedMultiplier.value = Math.floor(Math.random() * multipliers.value.length)
  finalScore.value = 20 * multipliers.value[selectedMultiplier.value]
  uni.showToast({ title: `抽中✖️${multipliers.value[selectedMultiplier.value]}`, icon: 'none' })
}

const watchAd = () => {
  uni.showToast({ title: '广告功能开发中', icon: 'none' })
  nextLevel()
}

const nextLevel = () => {
  uni.redirectTo({ url: '/pages/play/play' })
}
</script>

<style scoped>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}
.success-img {
  width: 80vw;
  margin-bottom: 40rpx;
}
.score-info, .final-score {
  font-size: 36rpx;
  margin: 20rpx 0;
}
.multiplier-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20rpx 0;
}
.picker {
  margin: 0 20rpx;
  font-size: 32rpx;
}
button {
  width: 60vw;
  margin: 20rpx 0;
}
</style> 